<template>
  <div>
    <el-dialog :modelValue="unitactiv"  width="70%" @close="$emit('close-dialog')">
      <el-descriptions
          class="margin-top"
          title="单位信息"
          :column="2"
          border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              单位名称
            </div>
          </template>
              {{dateils.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              负责人
            </div>
          </template>
          {{dateils.agerName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              联系人
            </div>
          </template>
          {{dateils.linkMan}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              成立日期
            </div>
          </template>
          {{dateils.unitCreateDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              单位编号
            </div>
          </template>
          {{dateils.code}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              单位类型
            </div>
          </template>
          {{getUnitTypeName(dateils.unitTypeId)}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              联系电话
            </div>
          </template>
          {{dateils.tel}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              排序号
            </div>
          </template>
          {{dateils.orderId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              简介
            </div>
          </template>
          {{dateils.intro}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              备注
            </div>
          </template>
          {{dateils.standBY1}}
        </el-descriptions-item>


      </el-descriptions>
<!--    <div style="text-align: center;margin-top: 20px">-->
<!--      <el-button type="primary" @click="confirmClose">关闭</el-button>-->
<!--    </div>-->
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》 ';
import {defineProps,watch,ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated} from
      'vue'
import {personDetails} from "@/api/researcherNavApi/researcherNavApi"
import {organizationListDetails} from "@/api/researcherNavApi/zzjgApi"
import {ElMessageBox} from "element-plus";

let dateils = reactive({})
const props = defineProps({
  unitobj:String,
  unitactiv:Boolean
});
// const ids = defineProps(['obj'])
// const props = defineProps(["obj",'activ'])
const unitactivs = ref(props.unitactiv); // 确保响应式
const confirmClose = () => {
  unitactivs.value = false;
};
watch(() => props.unitobj, (newValue,oldValue) => {
  console.log(props.unitobj, newValue,'props.obj');
  if(newValue !== oldValue){
    organizationListDetails(
        {id:props.unitobj}
    )
        .then((res)=>{
          Object.assign(dateils,res.data[0])
        })

  }

})

//单位类型
// 定义一个方法，根据 unitTypeId 从 danweileixingOptions 中查找对应的中文名称
const getUnitTypeName = (id) => {
  if (danweileixingOptions.value) {
    const item = danweileixingOptions.value.find((option) => option.code === id);
    return item ? item.name : '未知类型';
  }
  return '未知类型';
};
import {getCategory} from "@/api/researcherNavApi/researcherNavApi"
const danweileixingOptions = ref()
const getdanweileixingOptions =function () {
  getCategory(
      {
        'bizName':'单位类型'
      }
  )
      .then((res)=>{

        danweileixingOptions.value = res.data
      })
}
watch(() => props.unitactiv, (newValue,oldValue) => {

})

onBeforeMount(()=>{})// 生命周期 - 挂载之前
onMounted(()=>{
  getdanweileixingOptions()

})// 生命周期 - 挂载完成（可以访问 DOM 元素）
onBeforeUpdate(()=>{})// 生命周期 - 更新之前
onUpdated(()=>{})// 生命周期 - 更新之后
onBeforeUnmount(()=>{})// 生命周期 - 销毁之前
onUnmounted(()=>{})// 生命周期 - 销毁完成
onErrorCaptured((err)=>{})// 当事件处理程序或生命周期钩子抛出错误时
onRenderTracked((e)=>{})// 渲染的时候可以追踪到
onRenderTriggered((e)=>{})// 重新渲染的时候触发
// 如果页面有 keep-alive 缓存功能,这个两个函数会触发
onActivated(()=>{


})//进入的时候触发
onDeactivated(()=>{})//离开的时候触发

</script>

<style scoped>
.flex-box{
  display: flex;
}
.flex-box >div:first-child{
  font-weight: bolder;
}
</style>